<template>
  <div class="skin">
    <div
      class="skin__item"
      :key="item.value"
      :style="item.value === skin ? { borderColor: 'lightskyblue' } : {}"
      @click="skin = item.value"
      v-for="item in skinList"
    >
      <img :src="item.url" />
    </div>
  </div>
</template>

<script>
import { ref, watch } from "vue";

const baseList = ["quad", "rect", "round", "round--small"];
const skinList = baseList.map((item) => {
  return {
    value: item,
    url: require(`@/assets/resume/skill/${item}.png`),
  };
});
export default {
  name: "skin",
  props: {
    modelValue: Number,
  },
  setup(props, ctx) {
    const skin = ref(props.modelValue);
    watch(skin, (newVal) => {
      ctx.emit("update:modelValue", newVal);
    });
    watch(
      () => props.modelValue,
      (newVal) => {
        skin.value = newVal;
      }
    );
    return {
      skinList,
      skin,
    };
  },
};
</script>

<style scoped lang="less">
.skin {
  position: absolute;
  right: 0;
  top: 30px;
  width: 355px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px 15px 0 15px;
  border: whitesmoke 1px solid;
  box-shadow: 10px 10px 10px whitesmoke;
  z-index: 3;
  background: white;

  &__item {
    width: 155px;
    padding: 9px;
    border: 1px solid whitesmoke;
    margin-bottom: 10px;
    cursor: pointer;
  }

  &:before {
    content: "";
    display: block;
    position: absolute;
    right: 23px;
    top: -10px;
    width: 0;
    height: 0;
    border-bottom: 10px whitesmoke solid;
    border-left: 10px transparent solid;
    border-right: 10px transparent solid;
  }

  &:after {
    content: "";
    display: block;
    position: absolute;
    right: 23px;
    top: -9px;
    width: 0;
    height: 0;
    border-bottom: 10px white solid;
    border-left: 10px transparent solid;
    border-right: 10px transparent solid;
  }
}
</style>
